<template>
	<view>
		<view><image @click="onLinkPage('/pages/advertisement/advertisement',9)" class="image" :src="banner" mode="widthFix"></image></view>
		<view class="nav text-center">
			<uni-row :gutter="90">
				<uni-col :span="8" v-for="(item,index) in items" :key="index">
					<view :class="current == index ? 'tab-text-select' : 'tab-text'" @click="onClickItem(index)">
						<view>{{item}}</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view class="mt20">
			<view v-show="current === 0">
				<uni-card :border="false" is-full :is-shadow="false" v-for="(item,index) in infoData" :key='item.id' @click="onLink('enroll',item.id)">
					<view v-if="index < 2">
						<image slot='cover' style="width: 100%;border-radius: 5px;" :src="item.cover" mode="widthFix"></image>
						<view class="_title">{{item.title}}</view>
						<view>报名时间：{{item.start_time_exp}}-{{item.end_time_exp}}</view>
						<uni-row>
							<uni-col :span="16">
								<view>报名人数：{{item.surplus}}/{{item.number}}</view>
							</uni-col>
							<uni-col :span="8">
								<view class="text-right sign-normal">
									<uni-tag v-if="item.is_sign" text="立即报名" type="warning" size="normal" />
									<uni-tag v-else text="活动结束" size="normal" />
								</view>
							</uni-col>
						</uni-row>
					</view>
					<uni-row v-if="index >= 2">
						<uni-col :span="8">
							<view class="p8"><image class="cover" :src="item.cover"></image></view>
						</uni-col>
						<uni-col :span="16">
							<text class="title p8">{{item.title}}</text>
							<uni-row class="brief p8">
								<uni-col :span="16">
									<view class="text-left times">{{item.start_time}}-{{item.end_time}}</view>
								</uni-col>
								<uni-col :span="8" >
									<view class="text-right">
										<uni-tag v-if="item.is_sign" @click="onLink('enroll',item.id)" text="立即报名" type="warning" size="mini" />
										<uni-tag v-else @click="onLink('enroll',item.id)" text="活动结束" size="mini" />
									</view>
								</uni-col>
							</uni-row>
						</uni-col>
					</uni-row>
				</uni-card>
			</view>
			<view v-show="current === 1">
				
			</view>
			<view v-show="current === 2">
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{page:1,type:0},
				current: 0,
				items:['线下特训','线上网课','新筑视界'],
				banner:'https://xinzhu-1301398555.cos.ap-shanghai.myqcloud.com/wxapp/study-banner.jpg',
				infoData:[],
				timestamp:0
			}
		},
		onShow() {
			this.timestamp = this.$func.getTimestamp()
			this.onGetData()
		},
		methods: {
			onGetData(){
				let _this = this
				this.$request_api('applet_api/train','POST',this.form).then(res => {
					_this.current = 0
					_this.infoData = res.data
					_this.infoData.forEach((e) => {
						e.surplus = e.is_sign == true ? e.surplus : e.number
					})
				}).catch(err => {
					console.log(err)
				})
			},
			onClickItem(e){
				this.current = e
				if(this.current == 1){
					wx.navigateToMiniProgram({
						appId: 'wx87fdb9b285450ef4',  //appid
						path: '/page/home/home_index/home_index',//path
						extraData: {  //参数

						},
						envVersion: 'release', //开发版develop 开发版 trial   体验版 release 正式版 
						success(res) {
						// 打开成功
						}
					})
				}
				if(this.current == 2){
					this.onLink('business/business',0)
				}
			},
			onClickBaike(e){
				console.log(e)
			},
			onLink(url,id){
				uni.navigateTo({
					url: "/pages/study/"+url+"?id="+id
				});
			},
			onLinkPage(url,id){
				let urls = url
				if(id){
					urls = url+"?id="+id
				}
				uni.navigateTo({
					url: urls
				});
			}
		}
	}
</script>

<style scoped lang="scss">
._title{padding: 8px 8px 8px 0px;-webkit-line-clamp: 2; -webkit-box-orient: vertical;color: #000000;font-weight: bolder;font-size: 1rem;}
.title {padding: 8px 8px 0px 0px;height: 62px;-webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.cover{width: 100%;height: 80px;border-radius: 5px;}
.brief{padding: 15px 8px 0px 8px;}
.times{font-size: .8rem}

.nav{padding: 12px 32px;}
.tab-text{color: #666;border-bottom: 2px solid #FFF;padding: 12px 0px;}
.tab-text-select{color: #000;border-bottom: 2px solid #FFD101;padding: 12px 0px;font-weight: 500;}
</style>
